<template>
  <view>
    <view @click="isShow=true" class="area-item">
      <view class="area-item_label" :class="{'isWeight':fontWeight}">{{label}}</view>
      <view>
        <u--input v-model="areaName" disabledColor="#ffffff" disabled placeholder="请选择" border="none">
        </u--input>
      </view>
    </view>
    <u-picker ref="xxPicker" :show="isShow" :columns="columns" keyName="name" @confirm="areaConfirm"
      @change="changeHandler" :closeOnClickOverlay="true" @close="isShow=false" @cancel="isShow=false">
    </u-picker>
  </view>
</template>

<script>
  import {
    areaList
  } from '@vant/area-data';
  export default {
    name: "su-city-picker",
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: { //双向绑定value
        type: [String,Number],
        default: '110101'
      },
      label: { //地区自定义标签
        type: String,
        default: ''
      },
      fontWeight: {
        type: Boolean,
        default: false
      }, //是否加粗
      iconShow: { //图标是否显示
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        areaName: '', //省市区名称
        defaultIndex: [0, 0, 0],
        areaList,
        isShow: false,
        columns: [
          [], //省
          [], //市
          [] //区
        ],
        col1List: [], //省第一列
        col2List: [], //市第二列
        col3List: [], //区、县第三列
        col1Index: 0,
        col2Index: 0,
        col3Index: 0
      };
    },
    watch: {
      isShow(val) {
        this.$store.commit('setPopupOpen', val)
      }
    },
    mounted() {
      this.initData();
    },
    methods: {
      //获取省市区
      initData() {
        if (!this.value) {
          this.$emit('change', '110101')
          this.$emit('input', '110101')
        }
        this.$nextTick(() => {
          if (this.value) {
            this.provincePicker(this.value);
          }
        })
      },
      //省市区默认加载（省市联动）
      provincePicker(value) {
        const provinceList = this.areaList.province_list; //省
        const cityList = this.areaList.city_list //市
        const countyList = this.areaList.county_list //区、县
        if (value) {
          let col1List = []
          for (var key in provinceList) {
            col1List.push({
              name: provinceList[key],
              id: key
            })
          }
          var col1Val = value.slice(0, 2)
          this.col1Index = col1List.findIndex(item => item.id.slice(0, 2) ===
            col1Val) //第一列的默认索引
          let col2List = []
          for (var c in cityList) {
            const cItem = cityList[c]
            if (c.slice(0, 2) === col1Val) {
              col2List.push({
                name: cItem,
                id: c
              })
            }
          }
          this.col2List = col2List;
          var col2Val = 0;
          if (value == '110101') {
            col2Val = value.slice(0, 4)
          } else {
            col2Val = col2List[0].id.slice(0, 4)
          }
          const col2Index = col2List.findIndex(item => item.id.slice(0, 4) ===
            col2Val) //第二列的默认索引（获取市）
          const col3List = []
          for (var c in countyList) {
            const cItem = countyList[c]
            if (c.slice(0, 4) === col2Val) {
              col3List.push({
                name: cItem,
                id: c
              })
            }
          }
          var col3Val = 0;
          if (value == '110101') {
            col3Val = value
          } else {
            col3Val = col3List[0].id
          }
          console.log('区', col3Val)
          const col3Index = col3List.findIndex(item => item.id === col3Val) //第三列的默认索引(获取区，县)
          this.$refs.xxPicker.setColumnValues(0, col1List) //设置第一列列表
          this.$refs.xxPicker.setColumnValues(1, col2List) //设置第二列列表
          this.$refs.xxPicker.setColumnValues(2, col3List) //设置第三列列表
          this.$refs.xxPicker.setIndexs([this.col1Index, col2Index, col3Index]) //设置对应列的选择值
        }
      },
      changeHandler(e) {
        const {
          columnIndex,
          value,
          values, // values为当前变化列的数组内容
          index,
          // 微信小程序无法将picker实例传出来，只能通过ref操作
          picker = this.$refs.xxPicker
        } = e

        // 当第一列值发生变化时，变化第二列(后一列)对应的选项
        if (columnIndex === 0) {
          // picker为选择器this实例，变化第二列对应的选项
          const columnVal = e.value[0].id;
          this.provincePicker(columnVal)
        }
        if (columnIndex === 1) {
          // picker为选择器this实例，变化第二列对应的选项
          const columnVal = e.value[1].id;
          this.cityPicker(columnVal)
        }
      },
      //市区联动
      cityPicker(value) {
        console.log(value)
        const col2Val = value.slice(0, 4)
        const countyList = this.areaList.county_list //区、县
        const col2Index = this.col2List.findIndex(item => item.id.slice(0, 4) === col2Val)
        const col3List = []
        for (var c in countyList) {
          const cItem = countyList[c]
          if (c.slice(0, 4) === col2Val) {
            col3List.push({
              name: cItem,
              id: c
            })
          }
        }
        const col3Val = col3List[0].id
        const col3Index = col3List.findIndex(item => item.id === col3Val) //第一列的索引
        this.$refs.xxPicker.setColumnValues(2, col3List) //设置第三列列表
        this.$refs.xxPicker.setIndexs([this.col1Index, col2Index, col3Index]) //设置对应列的选择值
      },

      //区域按钮确认
      areaConfirm(e) {
        console.log(e)
        const arr = e.value;
        this.areaName = arr[0].name + "/" + arr[1].name + "/" + arr[2].name
        const code = arr[2].id
        this.$emit('change', code)
        this.$emit('input', code)
        this.isShow = false;
      },
    }
  }
</script>

<style lang="scss">
  .area-item {
    display: flex;

    &_label {
      font-size: 28upx;
      color: #303133;
      //flex: 1;
    }

    .u-input {
      width: 180%;
    }
  }

  .isWeight {
    font-weight: bold;
  }
</style>
